<html>
    <head>
        <meta charset="UTF-8">
        <title>包装盒面积计算器</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            body {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="row">
                <div class="col-xs-12 col-md-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">长 * 宽 * 高</h3>
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="length" class="col-sm-2 control-label">长</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" placeholder="长" id="length" v-model="length">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="width" class="col-sm-2 control-label">宽</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" placeholder="宽" id="width" v-model="width">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="height" class="col-sm-2 control-label">高</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" placeholder="高" id="height" v-model="height">
                                    </div>
                                </div>
                                <!--<div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default">计算</button>
                                    </div>
                                </div>-->
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-md-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">计算结果</h3>
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="zhengfan" class="col-sm-2 control-label">正面 / 反面</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="zhengfan" v-model="zhengfan">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="cemian" class="col-sm-2 control-label">左侧 / 右侧</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="cemian" v-model="cemian">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="dingbu" class="col-sm-2 control-label">顶部 / 底部</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="dingbu" v-model="dingbu">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    length: 40,
                    width: 30,
                    height: 15
                },
                computed: {
                    zhengfan () {
                        return this.length + ' * ' + this.height;
                    },
                    cemian () {
                        return this.width + ' * ' + this.height;
                    },
                    dingbu () {
                        return this.length + ' * ' + this.width;
                    }
                }
            })
        </script>
    </body>
</html>